import { useCallback } from 'react'
import { Table } from 'antd'
import HeaderSelection from '@/components/HeaderSelection.tsx'
import { useSnapshot } from 'valtio'
import { workbent } from '@/stores/workbenth.ts'
import Chart from '@/components/Chart'
import { product } from '@/stores/productAnayse'

// type SizeType = ConfigProviderProps["componentSize"];
export default function Products() {
    const search = useCallback((value: any) => {
        console.log(value)
    }, [])
    const workbenth = useSnapshot(workbent)
    const productStore = useSnapshot(product)
    return (
        <div className="reactive">
            {/* 顶部筛选区域 */}
            <div className="w-90% m-auto h-20 bg-white rounded flex *:m-2 justify-center items-center">
                <HeaderSelection
                    onSearch={search}
                    brandOptions={workbenth.brand}
                    partitionOptions={workbenth.partition}
                    shopOptions={workbenth.shop}
                    sourceOptions={workbenth.source}
                />
            </div>
            <div className="w-[90%] m-auto">
                <div className="h-150 m-auto mt-5 flex items-center ">
                    <div className="w-200 h-150 bg-white shadow-sm">
                        <p
                            style={{
                                fontSize: '13px',
                                fontWeight: 'bold',
                                paddingLeft: '10px'
                            }}
                        >
                            产品销量占比
                        </p>
                        <hr />
                        <div className='w-700px h-150'>
                            <Chart name='产品销量占比' width={'100%'} height={'100%'} options={productStore.salesRatio} />
                        </div>
                    </div>
                    <div className="w-200 h-150  ml-5 bg-white  shadow-sm">
                        <p
                            style={{
                                fontSize: '13px',
                                fontWeight: 'bold',
                                paddingLeft: '10px'
                            }}
                        >
                            产品销量TOP10
                        </p>
                        <hr />
                        <div style={{ width: '700px', marginLeft: '40px' }}>
                            <Table
                                columns={[...productStore.salesRank_top10_columns]}
                                dataSource={productStore.salesRank_top10_data}
                                size="middle"
                                bordered
                                pagination={false}
                            />
                        </div>
                    </div>
                </div>
            </div>
            <div className="w-[90%] m-auto mt-5  bg-white border rounded shadow-sm">
                <p
                    style={{
                        fontSize: '13px',
                        fontWeight: 'bold',
                        padding: '10px'
                    }}
                >
                    产品销量排行
                </p>
                <hr />
                <Table
                    columns={[...productStore.salesRank_columns]}
                    dataSource={productStore.salesRank_data}
                    rowKey={(record) => record.rank}
                    pagination={{
                        pageSize: 5
                    }}
                    bordered
                />
            </div>
        </div>
    )
}
